<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>青少年科学教育研究中心</title>
    <link rel="stylesheet" href="../../css/L1/course_report_01.css" />
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <script src="../../plugins/jquery-3.6.0.min.js"></script>
    <script src="../../plugins/echarts.min.js"></script>
  </head>

  <body>
    <div id="container">
      <div id="header">
        <div id="back" class="iconfont icon-fanhui"></div>
        <div id="address">走进科学</div>
        <div id="mypage"></div>
      </div>
      <div id="main">
        <div id="title">本次课程完成啦</div>
        <!-- 知识点卡片 -->
        <div id="konwledage_card">
          <div class="toptag"></div>
          <div class="card_title">本课知识点</div>
          <p>1、同样重量的同种物质，空心的体积更大。</p>
          <p>2、物体浸入一种液体时，其所排开的液体体积等于物体所浸入的体积。</p>
          <p>3、我们泡澡时感觉浮起来是因为存在浮力。</p>
          <p>4、船能够浮在水面上是因为存在浮力。</p>
        </div>
        <!-- 能力卡片 -->
        <div id="ability_card">
          <div class="card_title">本课能力五维图</div>
          <div class="fivefigure" id="fivefigure"></div>
        </div>
      </div>
      <div id="footer">
        <div id="my_course">
          <!-- <img src="../../images/我的课程.png" alt="" /> -->
          <div class="icon"></div>
          <p>我的课程</p>
        </div>
        <div id="study_report">
          <!-- <img src="../../images/报告.png" alt="" /> -->
          <div class="icon"></div>
          <p>学习报告</p>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import { modifyCourseStatus } from '../../js/modify_course_status.js'

    $(function () {
      let width = document.documentElement.clientWidth
      let height = document.documentElement.clientHeight
      let DESIGN_WIDTH = 750
      let DESIGN_HEIGHT = 1334

      let html = $('html')
      html.css({
        'font-size': (width * 12) / DESIGN_WIDTH,
      })

      // 获取和设置header
      let header = $('#header')
      header.css({
        width: width,
        height: (width * 90) / DESIGN_WIDTH,
      })
      header.css({
        'line-height': header.height() + 'px',
      })

      let header_back = $('#back')
      header_back.on('click', function (e) {
        location.href = '../../index.html'
      })

      // 获取和设置footer
      let footer = $('#footer')
      footer.css({
        width: width,
        height: (width * 100) / DESIGN_WIDTH,
      })
      footer.children('#my_course').on('click', function (e) {
        e.stopPropagation()
        location.href = '../../index.html'
      })

      footer.children('#study_report').on('click', function (e) {
        e.stopPropagation()
        location.href = '../study_report.html'
      })

      // 获取和设置main
      let main = $('#main')
      main.css({
        width: width,
        height: height - header.height() - footer.height(),
      })

      let main_title = $('#title')
      main_title.css({
        width: width,
        height: (width * 110) / DESIGN_WIDTH,
      })
      main_title.css('line-height', main_title.height() + 'px')
      main_title.css('font-size', main_title.height() * 0.3 + 'px')
      // 获取和设置统计卡片区域
      let knowledage_card = $('#konwledage_card')
      knowledage_card.css({
        width: (width * 690) / DESIGN_WIDTH,
        height: (height * 500) / DESIGN_HEIGHT,
        top: main_title.height(),
      })
      knowledage_card.css('left', (width - knowledage_card.width()) / 2)

      // 获取和设置照片卡片区域
      let ability_card = $('#ability_card')
      ability_card.css({
        width: knowledage_card.width(),
        height: (height * 405) / DESIGN_HEIGHT,
        top: main_title.height() + knowledage_card.height() + 20,
      })
      ability_card.css('left', (width - ability_card.width()) / 2)

      let myChart = echarts.init(document.getElementById('fivefigure'))
      let option
      option = {
        radar: {
          radius: '63%',
          name: {
            textStyle: {
              color: '#353535',
              fontFamily: '苹方-简',
              fontSize: '1.6rem',
            },
            padding: 0,
          },
          indicator: [
            { name: '认知观察', max: 10 },
            { name: '互动实践', max: 10 },
            { name: '想象创造', max: 10 },
            { name: '逻辑思考', max: 10 },
            { name: '比较判断', max: 10 },
          ],
        },
        series: [
          {
            name: '成绩',
            type: 'radar',
            data: [
              {
                value: [9, 1, 7, 6, 10],
              },
            ],
          },
        ],
      }

      if (option && typeof option === 'object') {
        myChart.setOption(option)
      }

      // TODO:改变课程的学习状态
      setTimeout(() => {
        modifyCourseStatus(
          1,
          {
            story_finish: true,
            principle_finish: true,
            labor_finish: true,
            report_finish: true,
          },
          { second_lock: false, third_lock: false, fourth_lock: false }
        )
      }, 1000)

      window.addEventListener('resize', function (e) {
        location.reload()
      })
    })
  </script>
</html>
